<template>
  <n-card>
    <n-grid x-gap="12" y-gap="20" :cols="2">
      <n-gi>
        <n-space>
          <n-switch type="primary" @click="toEdit=!toEdit">
            <template #checked>
              隐藏
            </template>
            <template #unchecked>
              编辑
            </template>
          </n-switch>
          <n-switch v-model:value="surfaceSetting.notRecord" :disabled="!toEdit">
            <template #unchecked>
              添加未记录
            </template>
            <template #checked>
              取消未记录
            </template>
          </n-switch>
          <n-button type="primary" @click="getInfo()" :disabled="!toEdit" size="small"> 查询</n-button>
        </n-space>
      </n-gi>
      <n-gi>
      <n-space>
        <n-radio-group
            v-model:value="dataInfo.dayUnit"
            name="radiobuttongroup1"
            :disabled="!toEdit"
        >
          <n-radio
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
          >
            {{ song.label }}
          </n-radio>
        </n-radio-group>
        <n-button
            type="primary"
            size="tiny"
            dashed
            @click="dataInfo.plus = dataInfo.plus-1;getInfo()"
        >
          上一{{ dayUnitMap.get(dataInfo.dayUnit) }}
        </n-button>
        <n-button
            type="primary"
            size="tiny"
            dashed
            @click="dataInfo.plus = dataInfo.plus+1;getInfo()"
        >
          下一{{ dayUnitMap.get(dataInfo.dayUnit) }}
        </n-button>
      </n-space>
      </n-gi>
      <n-gi>
        <n-space vertical>
          <n-radio-group
              v-model:value="surfaceSetting.chooseField"
              name="radiobuttongroup1"
              :disabled="!toEdit"
          >
            <n-radio
                v-for="song in chooseFieldSongs"
                :key="song.value"
                :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-radio-group>
          <n-space>
            <template v-if="surfaceSetting.chooseField === '1'">
              <n-radio-group
                  v-model:value="surfaceSetting.chooseFieldSub"
                  name="radiobuttongroup1"
                  :disabled="!toEdit"
              >
                <n-radio
                    v-for="song in chooseFieldSubSongs"
                    :key="song.value"
                    :value="song.value"
                >
                  {{ song.label }}
                </n-radio>
              </n-radio-group>
            </template>
            <template v-if="surfaceSetting.chooseField === '2'">
              <n-radio-group
                  v-model:value="surfaceSetting.chooseFieldSub"
                  name="radiobuttongroup1"
                  :disabled="!toEdit"
              >
                <n-radio
                    v-for="song in chooseFieldSubSongs2"
                    :key="song.value"
                    :value="song.value"
                >
                  {{ song.label }}
                </n-radio>
              </n-radio-group>
            </template>
          </n-space>
          <n-select
              v-if="surfaceSetting.chooseField === '2' && surfaceSetting.chooseFieldSub === '3'"
              v-model:value="surfaceSetting.chooseStageItems"
              multiple
              :options="stageSelect"
              style="width: 200px"
              :max-tag-count="1"
              filterable
          />
          <n-tree-select
              v-if="surfaceSetting.chooseField === '1' && surfaceSetting.chooseFieldSub === '3'"
              v-model:value="surfaceSetting.chooseFieldItems"
              multiple
              :options="fieldSelect"
              style="width: 200px"
              :max-tag-count="1"
              filterable
          />
        </n-space>
      </n-gi>
      <n-gi>
        <n-space vertical>
          <n-switch v-model:value="surfaceSetting.recordLife"  :disabled="!toEdit">
            <template #unchecked>
              统计生活
            </template>
            <template #checked>
              不统计生活
            </template>
          </n-switch>
          <n-space>
            <template v-if="surfaceSetting.recordLife">
              <n-radio-group
                  v-model:value="surfaceSetting.chooseLife"
                  name="radiobuttongroup1"
                  :disabled="!toEdit"
              >
                <n-radio
                    v-for="song in chooseLifeSongs"
                    :key="song.value"
                    :value="song.value"
                >
                  {{ song.label }}
                </n-radio>
              </n-radio-group>
            </template>
          </n-space>
          <n-select
              v-if="surfaceSetting.recordLife && surfaceSetting.chooseLife === '3'"
              v-model:value="surfaceSetting.chooseLifeItems"
              multiple
              :options="lifeModeItemSelect"
              style="width: 200px"
              :max-tag-count="1"
              filterable
          />
        </n-space>
      </n-gi>
    </n-grid>
    
    <SemiCircleTimePie
        :data="timePieData"
        :type="2"
        :key="key + 15"
    ></SemiCircleTimePie>
    <IdTimeBar
        :data="barData"
        :key="key"
    ></IdTimeBar>

  </n-card>
</template>
<script lang="ts" setup>

import useUserStore from "@/store/modules/user";
import {UseConstsStore} from "@/store/modules/consts";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {useMessage} from "naive-ui";
import {post, Response} from "@/api/http";
import {
  addFields, getAllStageSelect,
  getAllTakeTime4Stat,
  getFieldSelect,
  getLifeModeItemSelect,
  getStageSelect,
  getTakeTime4Stat
} from "@/api/url";
import {computed, onMounted, reactive, ref, watch} from "vue";
import SemiCircleTimePie from "@/views/taskoperation/tasklog/common/SemiCircleTimePie.vue";
import IdTimeBar from "@/views/field/statpanel/common/IdTimeBar.vue";
import {obj2Map} from "@/utils";

const userStore = useUserStore()
const useConsts = UseConstsStore()
const useSurfaceSetting = UseSurfaceSettingStore()
const message = useMessage()

const chooseLifeSongs = ref([{label:'进行中生活', value:'1'},{label:'全部生活', value:'2'}, {label:'自定义', value:'3'}])
const chooseFieldSongs = ref([{label:'领域', value:'1'},{label:'阶段', value:'2'},{label:'无', value:'3'}])
const chooseFieldSubSongs = ref([{label:'进行中领域', value:'1'},{label:'全部领域', value:'2'}, {label:'自定义', value:'3'}])
const chooseFieldSubSongs2 = ref([{label:'进行中阶段', value:'1'},{label:'已结束阶段', value:'4'}, {label:'全部阶段', value:'2'}, {label:'自定义', value:'3'}])

const key = ref(Date.now())
const toEdit = ref(false)

const songs = computed(()=>{
  return useConsts.getLabelValue(useConsts.consts.dayUnitMap).filter(l=>l.value!=='1')
})
const dayUnitMap = computed(()=>{
  return obj2Map(useConsts.consts.dayUnitMap)
})

const surfaceSetting = useSurfaceSetting.getSurfaceSetting()
const dataInfo = reactive({
  plus:0,
  dayUnit:'4',
})

const barData = ref<any>({series:[],timeRange:[]});
const timePieData = ref([])

const getInfo = async ()=>{
  try {
    // table.tableLoading.value = true;
    const data: Response = await post({
      url: getAllTakeTime4Stat,
      data: {...dataInfo,...surfaceSetting},
      token:userStore.getToken()
    });
    if(data.data.data){
      console.log(data.data)
      barData.value = data.data.data
      timePieData.value = barData.value.series.map((value1:any) => {
        let times = 0;
        value1.takeTimeList.forEach((v:any) => (times += v));
        return { name: value1.name, value: times };
      });
    }
  }catch(e) {
    message.error((e as Error).message)
  }finally {
    key.value = new Date().getTime();
  }
}
onMounted(getInfo)
watch(surfaceSetting,()=>{
  // console.log(stageSelect.value)
  if(surfaceSetting.recordLife && surfaceSetting.chooseLife === '3' && lifeModeItemSelect.value.length==0) getLifeModeItemSelectFromBack()
  if(surfaceSetting.chooseField === '1' && surfaceSetting.chooseFieldSub === '3' && fieldSelect.value.length==0) getFieldSelectFromBack()
  if(surfaceSetting.chooseField === '2' && surfaceSetting.chooseFieldSub === '3' && stageSelect.value.length==0) getStageSelectFromBack()
})

const fieldSelect= ref<Array<any>>( []);
const stageSelect = ref<Array<any>>( []);
const lifeModeItemSelect = ref<Array<any>>( []);
const getLifeModeItemSelectFromBack = async ()=>{
  try {
    const data: Response = await post({
      url: getLifeModeItemSelect,
      token:userStore.getToken()
    });
    // console.log(data)
    lifeModeItemSelect.value =data.data.data
    // stageSelect.push(...)
    // console.log(lifeModeItemSelect,"+++++++++++++++")
  }catch(e) {
    message.error((e as Error).message)
  }finally {
  }
}
const getFieldSelectFromBack = async ()=>{
  try {
    const data: Response = await post({
      url: getFieldSelect,
      token:userStore.getToken()
    });
    // console.log(data)
    fieldSelect.value = data.data.data
    // console.log(fieldSelect)
  }catch(e) {
    message.error((e as Error).message)
  }finally {
  }
}
const getStageSelectFromBack = async ()=>{
  try {
    const data: Response = await post({
      url: getAllStageSelect,
      token:userStore.getToken()
    });
    // console.log(data)
    stageSelect.value =data.data.data
    // stageSelect.push(...)
    console.log(stageSelect)
  }catch(e) {
    message.error((e as Error).message)
  }finally {
  }
}
</script>